<template>
    <div class="el-progress el-progress--circle">
        <div class="el-progress-circle" style="height: 120px; width: 120px;">
            <svg viewBox="0 0 100 100">
                <!--定义渐变-->
                <defs>
                    <linearGradient :id="colorId" x1="0" y1="0" x2="1" y2="1">
                        <stop offset="0%" :style="`stop-color:${shade[0]}`" stop-opacity="0.8"></stop>
                        <stop offset="100%" :style="`stop-color:${shade[1]}`" stop-opacity="1"></stop>
                    </linearGradient>
                </defs>
                <!--
            第1个path是灰色的背景环形
            stroke-width： 进度条的宽细
            stroke：颜色
          -->
                <path d="
          M 50 50
          m 0 -47
          a 47 47 0 1 1 0 94
          a 47 47 0 1 1 0 -94
          " stroke="#e5e9f2" stroke-width="2" fill="none" class="el-progress-circle__track"
                    style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;"></path>

                <!--
            第1个path是灰色的背景环形
            stroke-width： 进度条的宽细
            stroke：颜色
          -->
                <path d="
          M 50 50
          m 0 -47
          a 47 47 0 1 1 0 94
          a 47 47 0 1 1 0 -94
          " :stroke="`url(#${colorId})`" fill="none" stroke-linecap="round" stroke-width="4.8"
                    class="el-progress-circle__path"
                    :style="`stroke-dasharray: ${calcProgress()}px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;`">
                </path>
            </svg>
        </div>
        <div class="el-progress__text" :style="'color:' + shade[1]">
            <!-- <span class="percentage">{{ percentage }}</span> -->
            <span class="title">{{ title }}</span>
            <i class="fa fa-percent" aria-hidden="true"></i>
            <br />
            <span class="abstract">{{ abstract }}</span>
        </div>
    </div>
</template>

<script>
export default {
    name: "CircleProgress",
    props: {
        title: {
            type: String,
            default: '-'
        },

        //百分比
        percentage: {
            type: String,
            default: '-'
        },
        //摘要
        abstract: {
            type: String,
            default: '-'
        },
        //渐变
        shade: {
            type: Array,
            default: ['white', "black"],
        }
    },
    data() {
        return {
            //svg渐变的id，需要保证唯一否则颜色会重复
            colorId: null,
        }
    },
    created() {
        this.colorId = 'colorful-' + crypto.randomUUID();
    },
    methods: {
        calcProgress() {
            //百分之一的值等于svg的stroke-dasharray的2.9531
            return this.percentage * 2.9531
        }
    }


}
</script>

<style scoped>
.percentage {
    font-size: 50px;
    font-weight: bold;
}

.abstract {
    font-size: 1.25rem;
    font-weight: bolder;
}

.abstract-unit {
    font-size: 20px;
}

.title {
    font-size: 0.625rem;
    line-height: 1rem;
    color: black;
}
</style>